<script lang="ts" setup>
import type { ModeItem } from '../type'
import VerifyModel from './VerifyModal.vue'
import { useUserStore } from '@/stores'

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

const modeList = ref<ModeItem[]>([])

const refresh = () => {
  modeList.value = [
    {
      title: '安全手机',
      icon: 'icon-phone',
      value: userInfo.value.mobilePhone,
      subtitle: `${userInfo.value.phone ? '' : '手机号'}可用于登录、身份验证、密码找回、通知接收`,
      type: 'phone',
      jumpMode: 'modal',
      status: !!userInfo.value.mobilePhone,
      statusString: userInfo.value.mobilePhone ? '已绑定' : '未绑定',
    },
    {
      title: '登录密码',
      icon: 'icon-lock',
      subtitle: userInfo.value.lastPwdModifiedTime ? `为了您的账号安全，建议定期修改密码` : '请设置密码，可通过账号+密码登录',
      type: 'password',
      jumpMode: 'modal',
      status: !!userInfo.value.lastPwdModifiedTime,
      statusString: userInfo.value.lastPwdModifiedTime ? '已设置' : '未设置',
    },
  ]
  return modeList.value
}

const flag = ref(false)
const verifyModelRef = ref<InstanceType<typeof VerifyModel>>()
// 修改
const onUpdate = (type: string) => {
  verifyModelRef.value?.open(type)
  flag.value = true
}

onMounted(() => {
  refresh()
})
</script>

<template>
  <a-card title="安全设置" bordered class="gradient-card">
    <div v-for="item in modeList" :key="item.title">
      <div class="item">
        <div class="icon-wrapper">
          <ProIcon :icon="item.icon" :size="26" />
        </div>
        <div class="info">
          <div class="info-top">
            <span class="label">{{ item.title }}</span>
            <span class="bind">
              <icon-check-circle-fill v-if="item.status" :size="14" class="success" />
              <icon-exclamation-circle-fill v-else :size="14" class="warning" />
              <span style="font-size: 12px" :class="item.status ? 'success' : 'warning'">{{ item.statusString }}</span>
            </span>
          </div>
          <div class="info-desc">
            <span class="value">{{ item.value }}</span>
            {{ item.subtitle }}
          </div>
        </div>
        <div class="btn-wrapper">
          <a-button
            v-if="item.jumpMode === 'modal'"
            class="btn"
            :type="item.status ? 'secondary' : 'primary'"
            @click="onUpdate(item.type)"
          >
            {{ ['password'].includes(item.type) || item.status ? '修改' : '绑定' }}
          </a-button>
        </div>
      </div>
    </div>
  </a-card>
  <VerifyModel ref="verifyModelRef" @change="refresh" />
</template>

<style lang="less" scoped>
.gradient-card {
  border-radius: 8px;
  border: 1px solid var(--color-neutral-3);
}

.gradient-card .item {
  align-items: center;
  display: flex;
  margin-bottom: 20px;
}

.icon-wrapper {
  align-items: center;
  background: var(--color-neutral-2);
  border-radius: 50%;
  display: flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.info {
  flex: 1 1;
  margin: 0 16px;
  .info-top {
    margin-bottom: 4px;
    .label {
      font-weight: 500;
      line-height: 22px;
      margin-right: 12px;
    }

    .bind {
      font-size: 12px;
      font-weight: 500;
      line-height: 20px;
    }
  }

  .info-desc {
    color: #86909c;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;

    .value {
      color: #4e5969;
    }
  }
}

.btn-wrapper {
  align-self: flex-start;
  .btn {
    height: 28px;
    width: 56px;
  }
}
</style>
